{% extends 'front/user_base.html' %}
{% block css %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pure-min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/create.css') }}">
    <style>
    input#title{
        height: 3rem;
    }
   .pure-form  select {
        height: 3rem;
    }
    </style>
{% endblock %}
</head>
{% block content %}

<div class="content">
    <div class="header">
        <h2>创建分享</h2>
    </div>
    <div class="pure-g">
        {% for category, message in get_flashed_messages(with_categories=true) %}
            <div class="alert alert-{{ category }} alert-dismissable pure-u-1 pure-u-md-21-24">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            </div>
        {% endfor %}
        <form class="pure-form  pure-form-aligned pure-u-1 pure-u-md-21-24" action="{{ url_for('main.create_post') }}" method="post" onsubmit="return checkPost()">
            <fieldset>
                {{ form.csrf_token }}
                <div class="pure-control-group ">
                    {{ form.title(class='pure-u-5-5', id="title",placeholder="输入名称", required='') }}
                </div>
                <div class="pure-control-group">
{#                    <label for="desc" class="pure-u-1-3">俱乐部</label>#}
                    {{ form.club_id(class='pure-u-5-5', id="club_id",placeholder="选择俱乐部", required='') }}
                </div>
                <div class="pure-control-group">
                    {{ form.content(class='pure-u-5-5',rows='7', id="content",placeholder="输入内容，字数不能少于6个字符") }}
                </div>
                <div class="pure-controls-group" style="text-align: right">
                    <button type="submit" class="button-success pure-button button-large pure-u-3-3">
                        保存
                    </button>
                </div>
            </fieldset>
        </form>
    </div>
</div>
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='layer-v3.5.1/layer.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/simditor-2.3.28/site/assets/styles/simditor.css') }}" />
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/simditor-2.3.28/site/assets/scripts/module.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/simditor-2.3.28/site/assets/scripts/hotkeys.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/simditor-2.3.28/site/assets/scripts/uploader.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/simditor-2.3.28/site/assets/scripts/simditor.js') }}"></script>
<script>
    var editor = new Simditor({
        textarea: $('#content'),
        // 富文本框的placeholder属性
        placeholder: '请尽情输入吧！',
        // 顶部toolbar是否允许浮动
        // 如果允许浮动，则滚动页面时，toolbar会固定在网页顶部
        toolbarFloat: true,
        // 浮动偏移
        // 比如100，就是向下偏移100px
        // 网站可能会有浮动的导航条之类的，防止冲突
        toolbarFloatOffset: 100,
        // 隐藏toolbar
        toolbarHidden: false,
        // 插入图片时的默认图路径
        defaultImage: 'images/image.png',
        // 允许使用tab和shift+tab进行向左/向右缩进
        tabIndent: true,
        // 在textarea里添加隐藏input框
        // 键是input的name属性，值是value属性
        // 一般是用作表单提交时默认参数使用
        // 比如这个示例就会创建
        // <input type="hidden" name="from" value="simditor">
        // <input type="hidden" name="type" value="1">
        params: {type: '1', from: 'simditor'},
        // 图片按钮的功能
        // upload是上传图片功能
        // external是外链图片功能
        imageButton: ['upload', 'external'],
        // 图片上传接口设置
        upload: {
            // 图片上传接口路径
            url: 'upload.php',
            // 上传时的附加参数
            params: null,
            // 图片提交key
            fileKey: 'file',
            // 本地最大同时上传数
            connectionCount: 1,
            // 上传时退出的提示信息
            leaveConfirm: '正在上传中，你确定要退出吗？'
        },
        // 允许粘贴图片时快速上传
        pasteImage: true,
        // 粘贴时清除html样式
        cleanPaste: true,
        // 允许的标签列表
        allowedTags: ['br', 'span', 'a', 'img'],
        // 允许的标签属性列表
        allowedAttributes: {
            img: ['src', 'alt'],
            a: ['href', 'target'],
            font: ['color'],
            code: ['class']
        },
        // 允许的css样式列表
        allowedStyles: {
            span: ['color', 'font-size'],
            b: ['color'],
            i: ['color'],
            strong: ['color'],
            strike: ['color'],
            u: ['color'],
            p: ['margin-left', 'text-align'],
            h1: ['margin-left', 'text-align'],
            h2: ['margin-left', 'text-align'],
            h3: ['margin-left', 'text-align'],
            h4: ['margin-left', 'text-align']
        },
        // 插入代码支持的代码列表
        codeLanguages: [
            {name: 'Bash',value: 'bash'},
            {name: 'C++',value: 'c++'}
        ],
        toolbar: [
            'title',        // 标题
            'bold',         // 加粗文字
            'italic',       // 斜体文字
            'underline',    // 下划线
            'strikethrough',// 删除线
            '|',            // 控件分隔线
            'fontScale',    // 字体大小
            'color',        // 字体颜色
            'ol',           // 有序列表
            'ul',           // 无序列表
            'blockquote',   // 引用
            'code',         // 代码块
            'table',        // 表格
            'link',         // 链接
            'image',        // 图片
            'hr',           // 分割线
            'indent',       // 向右缩进
            'outdent',      // 向左缩进
            'alignment'     // 水平对齐
        ]
    })
    function checkPost(){
        console.log("check post is called")
        let title = jQuery("#title").val()
        let testPlain = simplemde.value()
        console.log(testPlain)
        content = simplemde.markdown(testPlain);
        jQuery("textarea#content").val(content);
        if(title.length < 5){
            layer.msg("名称不能小于5个字符")
            return false
        }
        if(content.length < 6 ){
            layer.msg("内容长度不能少于6个字符")
            return false
        }
        return true
    }
    </script>
{% endblock %}